<template>
  <div class="leasingmachinemanagement">
      <Card class="leasingmachinemanagement-card">
          <div style="display: flex;">
                <div class="felx-lease" style="flex:2">
                        <div class="state-tips">
                            <t-tooltip
                                class="placement top center"
                                content="已出租的状态"
                                :overlay-style="{ backgroundColor: ' #0048cd' , color: '#fff' , fontWeight: '600' }"
                                show-arrow
                            >
                                <span class="tips">已上桌 <span class="Statecolor-yellow"></span></span>
                            </t-tooltip>
                            <t-tooltip
                                class="placement top center"
                                content="未出租的状态"
                                :overlay-style="{ backgroundColor: '#f2995f' , color: '#fff' , fontWeight: '600' }"
                                show-arrow
                            >
                                <span class="tips">未上桌 <span class="Statecolor-gray"></span></span>
                            </t-tooltip>
                        </div>
                </div>
          </div>
          
          <div style="display: flex;">
            <div class="state">
                
                <div class="Lease-button">
                    <span class="lease-btn" v-for="(item,index) in leaselist" :key="index">
                        <div class="name"  v-if="item.cabinet != ''">
                            <!-- <input v-if="isshow" @click="tapinput(index,item)" class="input-btn" ref="inputbtn" type="checkbox" :checked="item.checked" /> -->
                            <div style="padding-bottom: 30px;">
                                <div class="positioning">
                                    <span v-if="item.status == 0" class="number-btn-Shalloworange">{{ item.cabinet }}</span>
                                    <span v-if="item.status == 1" class="number-btn-green">{{ item.cabinet }}</span>
                                </div>
                                <img src="../../assets/table.png" alt="">
                            </div>
                        </div>
                        <div  class="clicktable">
                            <t-button variant="outline" @click="tablebtn(item)">
                                <UserClearIcon />
                                下桌
                            </t-button>
                        </div>
                    </span>
                </div>
            </div>
          </div>
      </Card>
      <!-- <Rentbounced ref="Rentbounced" :confirmBody="bounceddata"/> -->

      <t-dialog
        theme="info"
        header="确认下桌吗"
        :body="bodytips"
        :visible.sync="visible"
        @confirm="onConfirm"
        :onClose="close1"
        >
        </t-dialog>
  </div>
</template>

<script>
import Card from '@/components/card/index.vue'; // 导入卡片
import { IconFont } from 'tdesign-icons-vue';
import { UserClearIcon } from 'tdesign-icons-vue';
// import Rentbounced from './Rentbounced.vue' // 出租弹框


export default {
    name: 'Leasingmachinemanagement',
    components: {
        Card,
        IconFont,
        UserClearIcon
    },
    data() {
        return {
            visible:false, // 控制是否显示提示
            bounceddata: '', // 传输到弹框的数据
            btnlease: [],
            leaselist: [], // 机器数组
            tabledata: {}, // 当前点击的桌子数据
            bodytips: '', // 弹框body的内容
        }
    },
    mounted () {
        // 生命周期
        this.unpdata()
    },
    methods : {
        // 下桌触发
        tablebtn (item) {
            this.visible = true;
            this.tabledata = item
            this.bodytips = `确认下桌吗，当前操作不可逆，请确认桌位号，当前桌位号：${ item.cabinet }` 
        },

        // 获取数据
        unpdata () {
            this.$request.get('/api/table').then((res) => {
                if (res.data.code == 200) {
                    this.leaselist = res.data.data.list
                }
            })
            .catch((error) => {
                console.log(error);
            })
        },
        
        // 弹框点击确认触发
         onConfirm(context) {
            if (this.tabledata.status == 0) {
                this.visible = false;
                this.$message.success('下桌成功')
            } else {
                this.$message.error('仅上桌的桌位号可以下桌哦～')
            }
        },

        // 弹框关闭触发
        close1() {
            this.visible = false;
            console.log('关闭');
        },
    }
}
</script>

<style lang="less" scoped>
.leasingmachinemanagement {
    .felx-lease {
        display: flex; 
        margin-bottom: 20px;
        width: 30%;
        align-items: center;
        .state-tips {
            // width: 100%;
            // flex: 2;
            .tips {
                margin-right: 10px;
                margin-left: 20px;
                font-weight: 500;
                    .Statecolor-green {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        background-color: #0048cd;
                        border-radius: 50%;
                        margin-left: 4px;
                    }
                    .Statecolor-blue {
                        display: inline-block;
                        width: 10px;
                        height: 10px;
                        background-color: #f2995f;
                        border-radius: 50%;
                        margin-left: 4px;
                    }
                            .Statecolor-pink {
                                display: inline-block;
                                width: 10px;
                                height: 10px;
                                background-color: #e34d59;
                                border-radius: 50%;
                                margin-left: 4px;
                            }
                            .Statecolor-yellow {
                                display: inline-block;
                                width: 10px;
                                height: 10px;
                                background-color:#ed7b2f;
                                border-radius: 50%;
                                margin-left: 4px;
                            }
                            .Statecolor-gray {
                                display: inline-block;
                                width: 10px;
                                height: 10px;
                                background-color:#00a870;
                                border-radius: 50%;
                                margin-left: 4px;
                            }
                    }
                }
    }
    
    .leasingmachinemanagement-card {
        .state {
            border: 1px solid #999;
            padding: 10px;
            box-sizing: border-box;
            font-weight: 600;
            width: 100%;
            border-radius: 6px;
            .Lease-button {
                height: 80vh;
                width: 100%;
                margin-top: 10px;
                border: 3px solid #999;
                border-radius: 4px;
                overflow: hidden;
                overflow-y:scroll;
                // padding: 20px;
                .lease-btn {
                    display: inline-block;
                    width: 276px;
                    border-radius: 4px;
                    height: 200px;
                    border: 1px solid #999;
                    text-align: center;
                    box-shadow: -1px 5px 5px #d8d8d8;
                    position: relative;
                    margin-top: 20px;
                    margin-left: 30px;
                    .name {
                        margin-top: 40px;
                        img {
                            width: 60%;
                            height: 80px;
                        }
                        .input-btn {
                            position: absolute;
                            top: 6px;
                            right: 6px;
                        }
                        .positioning {
                            position: absolute;
                            top: 0;
                            left: 0;
                            .number-btn {
                                background-color: #ed7b2f;
                                color: #fff;
                                font-size: 16px;
                                border-radius: 4px 0 4px 0;
                                padding: 0 10px;
                            }
                        }
                        .time-btn {
                            // background-color: #ECF7EE;
                            // margin-right: 10px;
                        }
                        span {
                            display: block;
                        }
                    }
                }
                .lease-btn:hover {
                        border: 3px solid #7ED4F9;
                }
            }
        }
        .right-lease {
            width: 28%;
            // height: 30px;
            // border-radius: 6px;
            // border: 1px solid #999;
            margin-left: 20px;
            // padding: 10px;
            .top-btn {
                border: 1px solid #999;
                border-radius: 6px;
                padding: 10px;
            }
            .title {
                font-size: 16px;
                font-weight: 600;
            }
            
        }
    }
}

.number-btn-blue {
     background-color: #0048cd;
     color: #fff;
     font-size: 16px;
     border-radius: 4px 0 4px 0;
     padding: 0 10px;
}
.number-btn-red {
     background-color: #e34d59;
     font-size: 16px;
     border-radius: 4px 0 4px 0;
     padding: 0 10px;
     color: #fff;
}
.number-btn-Shalloworange {
     background-color: #f2995f;
     font-size: 16px;
     border-radius: 4px 0 4px 0;
     padding: 0 10px;
     color: #fff;
}
.number-btn-green {
     background-color: #00a870;
     font-size: 16px;
     border-radius: 4px 0 4px 0;
     padding: 0 10px;
     color: #fff;
}
.btn {
    // display: inline-block;
    // width: 400px;
    // margin-top: 90px;
    // text-align: center;
    margin-right: 20px;
}


</style>